<template>
    <div style="padding:30px;">
        <!--左边显示角色列表（只有角色名称、角色描述、启用禁用开头按钮）-->
        <div class="box-left">
            <el-table :data="roleData" :show-header="false" stripe style="width: 100%">
                <!--不显示表头。在角色名称中，显示两行：角色名称和描述-->
                <el-table-column label="角色名称" width="180">
                    <template slot-scope="scope">
                        <div class="title" @click="getDetail(scope.row)">{{ scope.row.name }}</div>
                        <div class="remark">{{ scope.row.remark }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.statue" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>

            <div style="margin-top:20px">
                <el-button type="success" @click="eventAddRole" style="width:100%;">添加角色</el-button>
            </div>
        </div>

        <!--右边显示：点击左边角色对应的用户-->
        <div class="box-right">
            <div style="text-align:left;"><span style="font-size:30px;">{{ roleName }}</span></div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <!--用户列表-->
                <el-tab-pane label="所属用户" name="first">
                    <div>
                        <el-table :data="userData" style="width: 100%">
                            <el-table-column prop="Name" label="姓名">
                            </el-table-column>
                            <el-table-column prop="dep" label="部门" width="180">
                            </el-table-column>
                            <el-table-column prop="job" label="岗位" width="180">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <!--权限 列表-->
                <el-tab-pane label="拥有权限" name="second">
                    <div>
                        <el-tree :data="menuData" show-checkbox node-key="id" :default-expand-all="true" 
                            :default-checked-keys="selectMenuValue" :props="defaultProps">
                        </el-tree>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>


        <!--弹出层-->
        <div>
            <el-dialog title="添加角色" :fullscreen="true" :visible.sync="dialogAddRoleVisible">

                <!--左边显示：角色和用户列表-->
                <div class="add-left">
                    <div class="add-left-role">
                        <div class="add-box">
                            <div class="title">角色信息</div>
                            <el-form :model="addRoleForm">
                                <el-form-item label="角色名称" :label-width="formLabelWidth">
                                    <el-input v-model="addRoleForm.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色描述" :label-width="formLabelWidth">
                                    <el-input v-model="addRoleForm.remark" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="add-left-user" style="margin-top:20px;">
                        <div class="add-box">
                            <div class="title">配置用户</div>
                            <el-table :data="addUserData" style="width: 100%;max-height:250px;overflow: auto;" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="loginName" label="姓名">
                                </el-table-column>
                                <el-table-column prop="dep" label="部门" width="180">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>

                <!--右边显示：菜单树-->
                <div class="add-right">
                    <div class="add-box">
                        <div class="title">配置权限</div>
                        <el-tree ref="refAddMenuData" :data="addMenuData" show-checkbox node-key="id" :default-expand-all="true"
                            :default-checked-keys="selectMenuValue" :props="defaultProps"
                            @check-change="handleCheckChange">
                        </el-tree>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="eventAddRoleInfo">提 交</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            roleStatue: true,
            roleData: [
                { id: '1', name: '系统管理员', remark: '这是一个管理员角色', statue: '0' },
                { id: '2', name: '部门经理', remark: '这是一个部门经理角色', statue: '0' },
                { id: '3', name: '公司职员', remark: '这是一个公司职员角色', statue: '0' },
            ],
            userData: [
                { id: '1', name: '张三', dep: '开发部', job: '经理', statue: '0' },
                { id: '2', name: '李四', dep: '开发部', job: '职员', statue: '0' },
                { id: '3', name: '王五', dep: '测试部', job: '职员', statue: '0' },
            ],
            addUserData: [
                { id: '1', name: '张三', dep: '开发部', job: '经理', statue: '0' },
                { id: '2', name: '李四', dep: '开发部', job: '职员', statue: '0' },
                { id: '3', name: '王五', dep: '测试部', job: '职员', statue: '0' },
            ],
            activeName: 'first',
            menuData: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            addMenuData: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            selectMenuValue: [6, 7],
            dialogAddRoleVisible: false,
            addRoleForm: {
                name: '',
                remark: '',
            },
            formLabelWidth: '120px',
            roleName: '',
            multipleSelection: [],
            addSelectMenuTemp:[] //定义一个添加页面选择权限时，保存选择权限的id的临时变量
        }
    },
    methods: {
        //添加页面 --树的选择事件
        // handleCheckChange(data, checked, indeterminate) {
        //     //data --- 当前选择的数据
        //     //checked ---当前选中的
        //     //indeterminate --- 表示是否有子集
        //     //console.log(data, checked, indeterminate)
            
        //     let ids =  this.$refs.refAddMenuData.getCheckedKeys()
        //     // console.log(ids)
        //     this.addSelectMenuTemp = ids
        //     // if(checked)
        //     //     this.addSelectMenuTemp.push(data.id)                
        // },
        handleCheckChange() {
            this.addSelectMenuTemp =  this.$refs.refAddMenuData.getCheckedKeys()           
        },
        //添加页面-表格选择事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //添加页面 --提交按钮事件
        eventAddRoleInfo() {
            //this.dialogAddRoleVisible = false

            let data = {
                "roleName": "string",
                "roleRemark": "string",
                "selectedUsersId": [],
                "selectedMenusId": []
            }

            //角色信息
            data.roleName = this.addRoleForm.name
            data.roleRemark = this.addRoleForm.remark
            //选的用户id -- 多个
            //console.log(this.multipleSelection)

            var u = []
            this.multipleSelection.forEach(x => {
                //console.log(x.Id)
                u.push(x.Id)
            })
            data.selectedUsersId = u

            //选的权限菜单id -- 多个
            data.selectedMenusId = this.addSelectMenuTemp

            //提交到后台
            //console.log(data)

            let url=this.$baseUrl + 'month/role/add'
            this.$http.post(url,data).then(x=>{
                console.log(x)
            })

        },
        getDetail(row) {

            this.roleName = row.Name
            //this.onLoadUser(row.id)
            //加载用户
            let url = this.$baseUrl + 'month/user?roleId=' + row.Id
            this.$http.get(url).then(x => {
                this.userData = x.data.data
            })

            //加载权限
            //this.onLoadMenu(row.id)
            url = this.$baseUrl + 'month/menu?roleId=' + row.Id
            this.$http.get(url).then(x => {
                this.menuData = x.data
                this.selectMenuValue = x.data.data.checklist
            })
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        eventAddRole() {
            this.addUserData = []
            this.addMenuData = []
            this.dialogAddRoleVisible = true

            //加载用户
            let url = this.$baseUrl + 'rbac/user/query/all'
            this.$http.get(url).then(x => {
                this.addUserData = x.data.data
            })

            //加载权限
            url = this.$baseUrl + 'rbac/menu/recursion'
            this.$http.get(url).then(x => {
                this.addMenuData = x.data
            })

        },
        onLoadRole() {
            let url = this.$baseUrl + 'rbac/role/query/all'
            this.$http.get(url).then(res => {
                this.roleData = res.data.data
            })

        }
    },
    mounted() {
        this.onLoadRole()
    }
}
</script>

<style>
.box-left {
    width: 300px;
    float: left;
}

.box-right {
    margin-left: 320px;
}

.box-left .title {
    font-weight: 600;
}

.box-left .remark {
    font-size: 10px;
}


.add-left {
    width: 450px;
    float: left;
}

.add-right {
    margin-left: 470px;
}

.add-box {
    padding: 10px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
}

.add-box .title {
    font-size: 16px;
    color: #dcdcdc;
    text-align: left;
    margin-bottom: 10px;
}

.el-dialog__body {
    height: 70%;
    overflow: auto;
}
</style>